<template>
	<view class="diary" style="background: url('../../static/diary/bg.png');background-size: 100% 100%;">
		<!-- <view class="box" style="padding: 20px 10px;background-size: 100% 100%;background-size: cover" :style="{ backgroundImage: `url(${vuex_user_content.diary_image})` }">
			<view class="f16 fb cf">{{ vuex_user_content.space_name }}</view>
			<view class="flex cf">
				<view class="w50 f12" style="padding: 0;">记录相识的每一个瞬间</view>
				<view class="w50 f12" style="padding: 0;text-align: right;display: none">
					我
					<text class="f16">1</text>
					篇/ta
					<text class="f16">0</text>
					篇
				</view>
			</view>
		</view> -->
		<view class="header"><image src="../../static/diary/header.png" mode=""></image></view>
		<view class="diary-item" v-for="(item, index) in list">
			<view style="text-align: center;position: absolute;z-index: 3; top:-28px;left: 50%;margin-left: -27.5px;">
				<image
					:src="vuex_user.id == item.user_id ? vuex_user_content.my_avatar : vuex_user_content.ta_nickname"
					style="width: 55px;border-radius: 50%;  box-sizing: border-box;text-align: center;margin: auto; "
					mode="widthFix"
				></image>
			</view>
			<view class="l1" style="width: 100%;overflow: hidden;border-radius: 8px;margin: auto;position: relative;">
				<image :src="item.background_image" style="width: 100%;height: 400rpx;" mode="aspectFill "></image>
				<view @click="show = true" style="position: absolute;z-index: 1;width: 100%;line-height: 36px;text-align: center;color: #fff;top: 40rpx;left: 0;">
					{{ item.content }}
				</view>
				<view style="position: absolute;z-index: 1;width: 100%;line-height: 36px;text-align: center;color: #fff;bottom: 20px;left: 0;">
					<image :src="item.emoji" style="width: 30px;" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex options-btn" style="line-height: 24px;padding:10px;">
				<view class="f12 c6">{{ (item.updatetime + '').split(' ')[0] }}</view>
				<view class="flex f14 c6" style="margin-left: auto;">
					<view @click="edit(item)" class="flex a-t" style="margin: 0 5px;">
						<image src="../../static/diary/edit.png" style="width: 14px;" mode="widthFix"></image>
						编辑
					</view>
					<view @click="shanchu(item)" class="flex a-t" style="margin: 0 5px;">
						<image src="../../static/diary/del.png" style="width: 14px;" mode="widthFix"></image>
						删除
					</view>
					<view @click="(show = true), (record_id = item.id)" class="flex a-t" style="margin: 0 5px;">
						<image src="../../static/diary/replay.png" style="width: 14px;" mode="widthFix"></image>
						回复
					</view>
					<view @click="(record_id = item.id), zan()" class="flex a-t" :style="{ color: item.like == 0 ? '#000' : '#E7166B' }" style="margin: 0 5px;">
						<image :src="item.like == 0 ? '../../static/diary/like.png' : '../../static/diary/liked.png'" style="width: 14px;" mode="widthFix"></image>
						点赞
					</view>
				</view>
			</view>
			<view class="flex a-t f14 c6" v-for="(items, inx) in item.comments" style="padding: 0 10px 10px 10px;">
				<image
					:src="vuex_user.id == items.user_id ? vuex_user_content.my_avatar : vuex_user_content.ta_avatar"
					style="width: 30px;border-radius: 50%;margin-right: 6px; "
					mode="widthFix"
				></image>
				<view>{{ items.content }}</view>
				<view @click="scpl(items)" style="margin-left: auto;">
					<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/shanchu1.png" style="width: 20px;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view style="width: 280px;padding: 20px;">
				<view><u-input v-model="content" :type="type" :border="border" :height="height" :auto-height="autoHeight" /></view>
				<view style="margin-top: 20px;">
					<view @click="queding" class="button f14" style="width: 120px; text-align: center; line-height: 40px;margin: auto;">确定</view>
				</view>
			</view>
		</u-popup>
		<view @click="all('./xie')" class="button f14 write-btn">+ 写日记</view>
	</view>
</template>

<script>
// import img1 from '@https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/riji/bg.png';
export default {
	data() {
		return {
			emoimg: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/emoji/100.gif',
			text: 'hahaha',
			img2: '',
			list: [],
			page: 1,
			show: false,
			content: '',
			type: 'textarea',
			border: true,
			height: 100,
			autoHeight: true,
			record_id: '',
			height: 0
		};
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fa1e8a'
		});
		console.log(this.vuex_user_content);
		// console.log(this.vuex_user_content.draiy_image,'vuex_user_content.draiy_image')
		// for(let i=100; i<120;i++){
		// 	let img='https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/emoji/'+i+'.gif'
		// 	this.list.push(img)
		// }
	},

	onShow() {
		this.page = 1;
		this.list = [];
		this.records();
	},
	onReachBottom() {
		this.page++;
		this.records();
	},

	methods: {
		edit(e) {
			uni.navigateTo({
				url: './xie?item=' + JSON.stringify(e)
			});
		},
		async zan() {
			let data = {
				record_id: this.record_id
			};
			let res = await this.$u.api.like(data);
			this.page = 1;
			this.list = [];
			this.show = false;
			this.records();
		},
		async queding() {
			let data = {
				record_id: this.record_id,
				content: this.content
			};
			let res = await this.$u.api.xie(data);
			this.page = 1;
			this.list = [];
			this.show = false;
			this.records();
		},

		shanchu(d) {
			uni.showModal({
				title: '确定删除该日记',
				success: e => {
					if (e.confirm) {
						this.dele(d.id);
					}
				}
			});
		},
		scpl(d) {
			uni.showModal({
				title: '确定删除该评价',
				success: e => {
					if (e.confirm) {
						this.comment_del(d.id);
					}
				}
			});
		},

		async comment_del(id) {
			let res = await this.$u.api.comment_del({ comment_id: id });
			this.page = 1;
			this.list = [];
			this.records();
		},
		async dele(id) {
			let res = await this.$u.api.diary_delete({ record_id: id });
			this.page = 1;
			this.list = [];
			this.records();
		},
		async records() {
			// let my_space_id=
			let data = {
				my_space_id: this.vuex_user_content.id,
				page: this.page,
				limit: 10
			};
			let res = await this.$u.api.records(data);
			for (let i in res.diary_records) {
				this.list.push(res.diary_records[i]);
			}
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.l1')
					.boundingClientRect(data => {
						this.height = data[0].width;
					})
					.exec();
			}, 200);

			// this.list=res.diary_records
		},
		all(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background: #f0f0f0;
	height: 100vh;
	overflow-y: auto;
}
.diary {
	min-height: 100vh;
	overflow-y: auto;
	.header {
		image {
			width: 100vw;
		}
	}
	.diary-item {
		width: 90%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx #c5dae3;
		background: #fff;
	}
	.options-btn {
		color: #000;
		image {
			margin-right: 8rpx;
		}
	}
	.write-btn {
		width: 80%;
		text-align: center;
		line-height: 50px;
		position: fixed;
		z-index: 1;
		bottom: 50px;
		left: 50%;
		color: #fff;
		font-size: 30rpx;
		background: linear-gradient(to right, #FF7056, #FF465B);
		transform: translateX(-50%);
	}
}
</style>
